<template>
  <view class="feedback-page">
    <!-- 表单区域 -->
    <uni-forms ref="form" class="feedback-form">
      <!-- 反馈类型 -->
      <uni-forms-item label="反馈类型" name="type" required>
        <uni-data-checkbox v-model="formData.type" :localdata="feedbackTypes" />
      </uni-forms-item>

      <!-- 反馈内容 -->
      <uni-forms-item label="反馈内容" name="content" required>
        <uni-easyinput
          v-model="formData.content"
          type="textarea"
          placeholder="请详细描述您的问题或建议"
          :maxlength="500"
          :autoHeight="true"
        />
      </uni-forms-item>

      <!-- 联系方式 -->
      <uni-forms-item label="联系方式" name="contact">
        <uni-easyinput v-model="formData.contact" placeholder="手机/邮箱(选填)" />
      </uni-forms-item>

      <!-- 提交按钮 -->
      <button class="submit-btn" :disabled="isSubmitting" @click="handleSubmit">
        {{ isSubmitting ? '提交中...' : '提交反馈' }}
      </button>
    </uni-forms>

    <!-- 提交成功提示 -->
    <uni-popup ref="successPopup" type="message">
      <uni-popup-message type="success" message="提交成功" />
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSubmitting: false,
      feedbackTypes: [
        { value: 1, text: '功能建议' },
        { value: 2, text: '界面问题' },
        { value: 3, text: '内容纠错' },
        { value: 4, text: '其他问题' }
      ],
      formData: {
        type: 1,
        content: '',
        contact: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        this.isSubmitting = true
        await this.$refs.form.validate()
        // 这里调用提交接口
        this.$refs.successPopup.open()
        setTimeout(() => this.resetForm(), 1500)
      } catch (e) {
        console.error(e)
      } finally {
        this.isSubmitting = false
      }
    },
    resetForm() {
      this.formData = {
        type: 1,
        content: '',
        contact: ''
      }
    }
  }
}
</script>

<style lang="scss">
.feedback-page {
  padding: 30upx;
  min-height: 100vh;
  background: #f5f5f5;

  .feedback-form {
    background: #fff;
    padding: 30upx;
    border-radius: 20upx;

    .submit-btn {
      margin-top: 50upx;
      background: #007aff;
      color: #fff;
      height: 90upx;
      line-height: 90upx;
      border-radius: 45upx;
      font-size: 34upx;

      &[disabled] {
        opacity: 0.6;
      }
    }
  }
}
</style>
